<template>
  <div class="app-container">
    <CurrentState :options="stateOption" :current="4"/>
    <Detail pageType="details" />
     <div class="item_box">
      <el-tabs type="border-card" v-model="tabValue">
        <el-tab-pane name="1" label="项目跟进">
          <!-- 商机跟进活动记录 -->
          <ActivationRecord/>
          <!-- 商机跟进沟通记录 -->
          <CommunicationRecord/>
        </el-tab-pane>
        <el-tab-pane name="2" label="投标报价">
          <!-- 投标授权用印申请 -->
          <BidAuthorization/>
          <!-- 承保协议审核申请 -->
          <UnderwritingAgreement/>
          <!-- 投标报价服务申请 -->
          <TenderOffer/>
          <!-- 投标保证金申请 -->
          <TenderBond/>
          <!-- 履约保证金申请 -->
          <PerformanceBond/>
          <!-- 承保协调沟通 -->
          <UnderwritingCoordinationCommunication/>
          <!-- 投标结果记录 -->
          <BidResultRecord/>
          <!-- 保单关联 -->
          <PolicyAssociation/>
        </el-tab-pane>
      </el-tabs>
     </div>
    <el-row justify="center">
      <el-button plain type="primary" icon="Back" @click="backPage">返回</el-button>
    </el-row>
  </div>
</template>
    
<script setup>
import { ref } from "vue";
import Detail from "../Detail.vue";
import ActivationRecord from "./ActivationRecord.vue";
import CommunicationRecord from "./CommunicationRecord.vue";
const BidAuthorization = defineAsyncComponent(() => import('./BidAuthorization.vue'));
const UnderwritingAgreement = defineAsyncComponent(() => import('./UnderwritingAgreement.vue'));
const TenderOffer = defineAsyncComponent(() => import('./TenderOffer.vue'));
const TenderBond = defineAsyncComponent(() => import('./TenderBond.vue'));
const PerformanceBond = defineAsyncComponent(() => import('./PerformanceBond.vue'));
const UnderwritingCoordinationCommunication = defineAsyncComponent(() => import('./UnderwritingCoordinationCommunication.vue'));
const BidResultRecord = defineAsyncComponent(() => import('./BidResultRecord.vue'));
const PolicyAssociation = defineAsyncComponent(() => import('./PolicyAssociation.vue'));

const router = useRouter();
const tabValue = ref('1');
// 当前状态
const stateOption = [
  { label: "草稿", value: 1 },
  { label: "立项审批", value: 3 },
  { label: "项目跟进", value: 4 },
  { label: "完成", value: 5 },
];

const backPage = () => {
  router.back();
};
</script>
  
<style lang="scss" scoped>
</style>